<template>
  <div>
    <div>
      <el-card class="box-card" style="margin-bottom: 35px">
        <el-form ref="courier" :model="workforceForm" label-width="100px">
          <el-row type="flex" justify="space-between">
            <el-form-item label="员工账号:">
              <el-input
                v-model="workforceForm.employeeNumber"
                placeholder="请输入员工账号"
              />
            </el-form-item>
            <el-form-item label="员工姓名:">
              <el-input
                v-model="workforceForm.name"
                placeholder="请输入员工姓名"
              />
            </el-form-item>
            <el-form-item label="工作模式：">
              <el-select ref="selectTree" v-model="workforceForm.workPatternId" class="main-select-tree select">
                <el-option v-for="item in workPat" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>

            </el-form-item>
          </el-row>
          <el-row type="flex" justify="space-between">
            <el-form-item label="月份:">
              <el-date-picker
                v-model="workforceForm.month"
                type="month"
                placeholder="选择月"
              />
            </el-form-item>
            <el-form-item label="所属机构">
              <!-- 下拉 树形图 关键select需要option 关键思路隐藏 option 直接显示自适应树状结构   -->
              <el-select ref="selectTree" v-model="selectValue" class="main-select-tree select">
                <el-option v-for="item in treeData" :key="item.id" :label="item.name" :value="value" style="display: none;" />
                <el-tree
                  ref="selecteltree"
                  class="main-select-el-tree"
                  :data="treeData"
                  node-key="id"
                  highlight-current
                  :props="defaultProps"
                  :expand-on-click-node="false"
                  @node-click="hasValue"
                />
              </el-select>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="onSearch">搜索</el-button>
              <el-button @click="clear">重置</el-button>
            </el-form-item>
          </el-row>
        </el-form>
        <!--  -->
      </el-card>
    </div>

    <el-card style="padding: 15px;">
      <el-row style="margin-bottom: 20px;">
        <el-button type="primary" style="width:100px; height: 40px;" @click="config">排班设置</el-button>
        <el-button type="primary" style="width:100px; height: 40px; margin-left: 20px;" plain @click="open">绑定排班</el-button>
      </el-row>
      <div>

        <el-table
          :data="tableData"
          stripe
          style="width: 100%"
          :header-cell-style="{ background: '#f8faff' }"
          @select="check"
          @select-all="checkAll"
        >
          <el-table-column
            type="selection"
            width="55"
            fixed="left"
          />
          <el-table-column
            prop="employeeNumber"
            label="员工账号"
            fixed="left"
          />
          <el-table-column
            prop="name"
            label="员工姓名"
            fixed="left"
          />
          <el-table-column
            prop="phone"
            label="员工电话"
            fixed="left"
          />
          <el-table-column
            prop="userType"
            label="员工角色"
            fixed="left"
          >
            <template v-slot="{row}">
              <span v-if="row.userType ===1">员工</span>
              <span v-else-if="row.userType ===2">快递员</span>
              <span v-else>司机</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="workPatternName"
            label="当前工作模式"
            fixed="left"
          />
          <el-table-column
            v-for="(item,index) in list"
            :key="index"
            :label="index+1+''"
          >
            <template v-slot="{row}">
              <div v-if="row.workSchedules[index]" class="work"><span>上</span></div>
              <div v-else class="work" style="color:#20232a ; border-color: #d4d9df; background-color: #eff3f8;"><span>休息</span></div>
            </template>
          </el-table-column>
        </el-table>

        <el-row type="flex" justify="center" style="margin-top: 20px;">
          <el-pagination
            :page-sizes="[10, 20, 30, 40]"
            :page-size="paramsPage.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </el-row>
      </div>
    </el-card>
    <!-- 模态框 -->
    <el-dialog
      title="人工调整"
      :visible.sync="dialogVisible"
      width="30%"
      style="padding: 30px 50px;"
    >
      <el-row style="margin: 25px 0; padding: 0 20px;">
        <el-radio v-model="binding.workPatternType" label="1" style="50%">礼拜制</el-radio>
        <el-radio v-model="binding.workPatternType" label="2">连续制</el-radio>
      </el-row>
      <el-row type="flex" style="padding: 0 20px;">
        <span>模式名称</span>
        <el-select v-model="binding.workPatternId" placeholder="请选择" style="width: 80%;">
          <el-option
            v-for="item in workPat"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-row>
      <span slot="footer" class="dialog-footer" style="text-align: center;">
        <el-button type="primary" @click="onSubmit">确 定</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>

      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getWorkforceList } from '@/api/scheduling'
import { getWorkPattern } from '@/api/workPattern'
import { getTree } from '@/api/user'
export default {
  data() {
    return {
      selectValue: '',
      value: 11,
      list: [],
      dialogVisible: false,
      workforceForm: {
        employeeNumber: '', // 账号
        name: '',
        workPatternId: '',
        month: '',
        agencyId: ''
      },
      binding: {
        userIdList: [],
        userType: '1',
        workPatternType: '1',
        workPatternId: ''
      },
      treeData: [],
      tableData: [],
      workPat: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      paramsPage: {
        page: 1,
        pageSize: 10
      },
      total: 1
    }
  },

  async created() {
    this.getList()
    // 工作模式列表
    const res = await getWorkPattern()
    this.workPat = { ...res.data[1], ...res.data[2], ...res.data[0] }

    // 树状机构列表
    const { data } = await getTree()
    // console.log(data)
    this.treeData = JSON.parse(data)
  },
  methods: {
    open() {
      if (!this.binding.userIdList.length) {
        this.$message.error('请选择调整人员')
        return
      }
      this.dialogVisible = true
    },
    // 每页显示条数发生改变时
    handleSizeChange(page) {
      this.paramsPage.pageSize = page
      this.getList()
    },
    // 点击与回车分页
    handleCurrentChange(page) {
      this.paramsPage.page = page
      this.getList()
    },
    async getList() {
      const { data } = await getWorkforceList(this.paramsPage)
      this.tableData = data.items
      this.total = +data.counts
      this.list = data.items[0].workSchedules
    },
    async getOther() {
      const { data } = await getWorkforceList(this.paramsPage)
      this.tableData = data.items
      this.total = +data.counts
    },
    hasValue(row) {
      this.workforceForm.agencyId = row.id
      this.selectValue = row.name
      this.$refs.selectTree.blur()
    },
    onSearch() {
      this.paramsPage = { ...this.workforceForm }
      this.getOther()

      // 复原
      // this.paramsPage = pageObj()
    },
    // 重置
    clear() {
      this.selectValue = ''
      this.workforceForm.workPatternId = ''
      this.getOther()
    },
    check(row) {
      // console.log(row)
      this.binding.userIdList = row.map(v => v.agencyId)
    },
    checkAll(row) {
      this.binding.userIdList = row.map(v => v.agencyId)
    },
    onSubmit() {
      this.$message.error('初始数据不能被改变')
      this.dialogVisible = false
    },
    config() {
      this.$store.commit('user/SET_NAV_STATUS', true)
      this.$router.push('/sort')
    }
  }
}
</script>

<style scoped lang="scss">
::v-deep .el-form-item {
  width: 30% !important;
}
::v-deep .el-input,
::v-deep .el-select {
  width: 100%;
}
.operate {
  background-color: transparent;
    border: none;
    color:#419eff ;
}
::v-deep .btn-next,
::v-deep .btn-prev,
::v-deep .el-pager,
::v-deep .el-pagination button:disabled,
::v-deep .el-pager li {
  background-color: #f3f5f9;
}
::v-deep .el-input, ::v-deep .el-select,.select{
    width: 100% !important;
  }

.work{
  width: 25px;
  height: 25px;
  background-color: #ffeeeb;
  border-radius: 50%;
  color: #e15536;
  border: 1px solid #e15536;
  text-align: center;
  line-height: 25px;
  font-size: 15px;
}
::v-deep .el-dialog__footer{
    text-align: center;
}

</style>
